<template>
  <div>
    <!-- table:表格对应的数据 -->
    <!-- row-key="id":表格选择的依据,通过id选择,必填项 -->
    <!-- default-expand-all:自动展开数据 -->
    <!-- tree-props:属性数据的属性 -->
    <!-- 1.引入表格和创建依赖数据 -->
    <!-- 4.改变表格对应的字段值 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="title" label="活动名称"> </el-table-column>
      <el-table-column prop="begintime" label="开始事件">
        <template slot-scope="scope">
          {{ Number(scope.row.begintime) | fomatetime }}
        </template>
      </el-table-column>
      <el-table-column prop="endtime" label="结束时间">
        <template slot-scope="scope">
          {{ Number(scope.row.endtime) | fomatetime }}
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success">已启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
          <!-- {{ scope.row }} 是作用域接收的本条全部数据-->
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column prop="icon" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="edit(scope.row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/*  导入请求接口 */
// 1 获取用户数据总条数
import { getSeckList, seckDelete } from "../../api.js";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getsecklist();
  },
  methods: {
    updata() {
      this.getsecklist();
    },
    // 2.2 获取商品列表
    async getsecklist() {
      //  2.3 传当前的条数和当前的页数
      let res = await getSeckList({
        size: this.size,
        page: this.currentPage,
      });
      // 2.4 将当前相应的数据给表格进行渲染
      this.tableData = res.list;
      console.log(this.tableData);
    },
    /* 编辑功能 */
    /* list子->index父元素->info子元素 */
    edit(info) {
      // console.log(info);
      this.$emit("edit", info);
    },
    /* 删除功能 */
    del(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        // 确认删除走then分支
        .then(async () => {
          /* 导入接口，传入必要的参数id */
          let res = await seckDelete({ id });
          /* 将返回的新数据直接赋值给表格,减少一次请求，直接更新数据 */
          this.tableData = res.list;
          /* 对删除状态进行提示 */
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        })
        //取消删除走.catch分支
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
</style>